import {Upload, Icon, Modal, message, Checkbox} from 'antd';
import React, {Component} from 'react';
import {file} from "../value";
import {config} from "../config";
import '../css/other.css';
import app from "../app";

class PictureUpload extends Component {
    state = {
        previewVisible: false,  //是否显示预览的图片
        previewImage: '',  //预览图片的地址
        fileList: this.props.fileList || [], //已经上传的文件列表（受控）
        parameter: {},  //传给服务器的参数
        fileLength: this.props.size, //一共显示多少张图片
        multiple: this.props.multiple,  //是否支持多选
        isOccur: 2
    };

    // 上传文件之前 判断是否为图片类型
    beforeUpload = (file) => {
        const isJPG = file.type === 'image/jpeg';
        const isPng = file.type === 'image/png';
        const isGif = file.type === 'image/gif';
        if (!isJPG && !isPng && !isGif) {
            this.setState({
                isOccur: 1
            });
            message.error('注意上传的图片格式（只能上传jpeg和png）!');
        } else if (file.size > 2097152) {
            this.setState({
                isOccur: 1
            });
            app.alert('上传的图片大小不能大于 2M ', 'error', 3);
        } else {
            this.setState({
                isOccur: 2
            })
        }
    };

    // 关闭预览的弹出框
    handleCancel = () => {
        this.setState({previewVisible: false})
    };

    // 点击文件链接或预览图标时的回调  即放大图片观看
    handlePreview = (file) => {
        console.log(file)
        this.setState({
            previewImage: file.url || file.thumbUrl,  //传给Modal框中图片地址H
            previewVisible: true,
        });
    };

    render() {
        const {previewVisible, previewImage, currentIndex} = this.state;
        const {pictureList, len} = this.props;
        return (
            <div className="clearfix">

                {
                    pictureList.map((item, index) => {
                        return (
                            <div className={'uploadStyle'} key={index}>
                                <img src={config.imgServerUrl + item} alt={''}
                                     onClick={() => this.handleShowModal(index)}/>
                                <Icon type={'close'} className={'imgCloseIcon'}
                                      onClick={(e) => this.handleDelete(e, index)}/>
                            </div>
                        )
                    })
                }
                {
                    pictureList.length < len ?
                        <Upload name="logo" action={config.serverUrl + file.UPLOAD} showUploadList={false}
                                onChange={(e) => this.handleUpload(e)}
                                beforeUpload={this.beforeUpload}>
                            <div className={"uploadStyle"}>
                                <Icon type={this.state.loading ? 'loading' : 'plus'}/>
                                <div className="ant-upload-text">Upload</div>
                            </div>
                        </Upload> : ''
                }
                {/*预览图片的弹出框*/}
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel} width={600}>
                    <img alt="example" style={{width: '100%', height: 400}}
                         src={config.imgServerUrl + pictureList[currentIndex]}/>
                </Modal>
            </div>
        );
    }

    componentDidMount() {

    }

    /**
     * 预览
     * @param index
     */
    handleShowModal(index) {
        this.setState({previewVisible: true, currentIndex: index});
    }

    /**
     * 上传文件
     * @param file
     * @param fileList
     * @param event
     */
    handleUpload(event) {
        const file = event.file;
        const status = file.status;
        const _this = this;
        if (status === "done") {
            const response = file.response;
            if (response.code === 1) {
                const imgItem={};
                imgItem.file_path=response.data.file_path;
                imgItem.file_name=response.data.file_name;
                const imgUrl = response.data.file_path;
                let {pictureList,pictureList1} = this.props;
                pictureList1.push(imgItem);
                pictureList.push(imgUrl);
                this.props.getPictureList(pictureList,pictureList1);
            } else {
                app.alert(response.msg, 'error', 1);
                _this.setState({imgUrl: ''});
            }
        }
    }

    /**
     * 删除图片
     * @param e
     * @param index
     */
    handleDelete(e, index) {
        e.preventDefault();
        let {pictureList,pictureList1} = this.props;
        pictureList.splice(index, 1);
        pictureList1.splice(index,1);
        this.props.getPictureList(pictureList,pictureList1);
    }

}

export {PictureUpload};